//@ts-nocheck
import React, { useEffect, useRef, useImperativeHandle } from 'react'
import * as echarts from 'echarts'
import 'echarts/lib/component/grid'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import 'echarts/lib/chart/line'
import { ColorGamut } from '../colorConfig'
import './index.less'

const BasicRadar = ({ options, chartRef, chartId }) => {
  const echartsInstance = useRef(null)

  useEffect(() => {
    echartsInstance.current = echarts.init(document.getElementById(chartId || 'basic-radar-ref'))
  }, [])

  useEffect(() => {
    if (echartsInstance) setOptions(options)
  }, [options])

  useImperativeHandle(chartRef, () => ({
    getInstance: () => {
      return echartsInstance.current
    }
  }))

  const setOptions = (data) => {
    let scaleArr = []
    let value = []
    let maxValue = 0

    data.forEach((dataItem) => {
      if (dataItem.value > maxValue) maxValue = dataItem.value
    })
    data.forEach((item, index) => {
      if (index === 0) {
        scaleArr.push({ name: item.name, max: maxValue, min: -maxValue })
      } else {
        scaleArr.push({
          name: item.name,
          axisLabel: { show: false },
          max: maxValue,
          min: -maxValue
        })
      }
      value.push(item.value)
    })
    echartsInstance.current.setOption({
      tooltip: {
        trigger: 'item',
        borderWidth: 0,
        extraCssText: 'box-shadow: 0 6px 24px 0px rgba(7, 19, 43, 0.08);'
      },
      color: ColorGamut,
      radar: {
        splitNumber: 5,
        radius: 160,
        indicator: scaleArr,
        axisLine: {
          lineStyle: {
            color: '#DCE0E6'
          }
        },
        name: {
          textStyle: {
            color: '#617185'
          },
        },
        axisLabel: {
          show: true,
          color: '#ccc',
          showMinLabel: false
        },
        splitArea: {
          show: false,
          areaStyle: {
            color: 'rgba(255,0,0,0)'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: '#ECEEF1',
            type: 'dashed'
          }
        }
      },
      series: [
        {
          type: 'radar',
          areaStyle: {
            color: 'rgba(82,141,249, 0.1)'
          },
          data: [
            {
              value: value
            }
          ],
          itemStyle: {
            normal: {
              borderWidth: 1,
              borderColor: '#ffffff',
              // lineStyle: {
              //   type: 'dotted'
              // }
            },
            // emphasis: {
            //   color: 'red'
            // }
          }
        }
      ]
    })
  }
  return <div className="basic-radar" id={chartId || 'basic-radar-ref'} />
}
export default (BasicRadar)
